<template>
	<view class="content">
		<view class="form">
			<view class="form-card" v-for="v in formList">
				<rowInputVue :item="v" v-if="v.type == 'input'" v-model="form.name"></rowInputVue>
				<rowGroupVue :item="v" v-if="v.type == 'group'" v-model="form.isdelivery"></rowGroupVue>
				<listChooseVue :item="v" v-if="v.type == 'list' && form.isdelivery === '0'" v-model="form.valuation">
				</listChooseVue>
			</view>
			<view class="form-item">
				<view class="form-item-label">发货时间</view>
				<view>
					<picker :range="timeList" @change="timeindex = $event.detail.value">
						<view class="flex align-center">
							<text v-if="timeindex === -1" class="text-gray">请选择发货时间</text>
							<text v-else>{{timeList[timeindex]}}</text>
							<image :src="$staticImagePath('publish/publish_arrow.png')" class="right-icon"></image>
						</view>
					</picker>
				</view>
			</view>
			<template v-if="form.isdelivery === '0'">
				<view class="form-item column" v-for="(v,k) in templates">
					<view class="form-item-title-box">
						<view>
							<!-- <input type="text" placeholder="请输入区域名称" v-model="v.title"> -->
						</view>
						<view class="tool-icon">
							<image :src="$staticImagePath('/common/delete1.png')" @click="delTemlates(k)"></image>
							<!-- <image :src="$staticImagePath('/common/edit.png')"></image> -->
						</view>
					</view>
					<view class="form-item-address">
						<view class="form-item-area">可配送地区</view>
						<view class="address-content">
							<text v-for="(vv,kk) in area_name[k]" @click="delArea(k,kk,vv)">
								<template v-if="kk > 0">&nbsp;,&nbsp;</template>
								{{vv}}
							</text>
						</view>
					</view>
					<view class="address-input">
						<view>
							<view>首重</view>
							<view>
								<input type="text" placeholder="请输入" v-model="v.first">
							</view>
							<view>元</view>
						</view>
						<view>
							<view>运费</view>
							<view>
								<input type="text" placeholder="请输入" v-model="v.first_fee">
							</view>
							<view>元</view>
						</view>
						<view>
							<view>续重</view>
							<view>
								<input type="text" placeholder="请输入" v-model="v.additional">
							</view>
							<view>元</view>
						</view>
						<view>
							<view>运费</view>
							<view>
								<input type="text" placeholder="请输入" v-model="v.additional_fee">
							</view>
							<view>元</view>
						</view>
					</view>
					<view class="sel-area" @click="selArea(k)">选择配送区域</view>
				</view>
				<view class="add-btn" @click="addTemplates">新增配送区域</view>
			</template>
		</view>
		<view class="add-btn add-template" @click="submit">新增运费模版</view>
		<areaVue ref='area' @confirm="areaConfirm"></areaVue>
	</view>
</template>

<script>
	import {
		addLogistics,
		getLogisticsDetails
	} from '@/API/business.js'
	import rowInputVue from '@/components/form/rowInput.vue'
	import rowGroupVue from '@/components/form/rowGroup.vue'
	import listChooseVue from '@/components/form/listChoose.vue'
	import areaVue from './components/area.vue'
	export default {
		components: {
			rowInputVue,
			rowGroupVue,
			listChooseVue,
			areaVue
		},
		data() {
			return {
				formList: [{
					type: 'input',
					mode: 'text',
					place: '请输入模版名称',
					title: '模版名称',
					maxlength: 100,
					require: true
				}, {
					type: 'group',
					title: '是否包邮',
					require: true,
					list: [{
						id: '0',
						title: '自定义运费'
					}, {
						id: '1',
						title: '卖家包邮'
					}]
				}, {
					type: 'list',
					title: '计价方式',
					require: true,
					list: [{
						id: '0',
						name: '按件数',
					}, {
						id: '1',
						name: '按重量',
					}, {
						id: '2',
						name: '按体积',
					}]
				}],

				timeList: ['4小时内', '8小时内', '12小时内', '16小时内', '20小时内', '1天内', '2天内', '3天内', '4天内', '5天内', '7天内', '8天内',
					'10天内', '12天内', '15天内', '17天内', '20天内', '25天内', '30天内'
				],
				timeindex: -1,

				area_name: [],
				templates: [],
				templatesIndex: 0,

				id: 0,

				form: {
					name: '', // 模版名称
					isdelivery: '', // 是否包邮
					valuation: '', // 计价方式
					delivery: '' // 发货时间
				},
			}
		},
		onLoad(options) {
			uni.$on('areaChoose', res => {
				for (let i of res.list) {
					let name = i.map(v => v.name)
					if (name.length == 1) name.push('全部')
					this.area_name[this.templatesIndex].push(name.join('/'))
					this.templates[this.templatesIndex].city.push(i[i.length - 1].id)
				}
			})
			if (options.id) {
				this.id = options.id
				this.getDetail()
			}
		},
		methods: {
			getDetail() {
				getLogisticsDetails({
					logistics_id: this.id
				}).then(res => {
					console.log('-=-=res', res)
					this.form = {
						name: res.data.name,
						isdelivery: res.data.isdelivery,
						valuation: res.data.valuation,
					}
					this.timeindex = res.data.delivery

					let templates = []
					let area_name = []
					for (let i of res.data.children) {
						area_name.push(i.address_text)
						let item = {
							first: i.first,
							first_fee: i.first_fee,
							additional: i.additional,
							additional_fee: i.additional_fee,
							city: i.citys
						}
						templates.push(item)
					}
					this.area_name = area_name;
					this.templates = templates;
				}).catch(err => {
					console.log('--==err', err)
				})
			},
			addTemplates() {
				this.area_name.push([])
				this.templates.push({
					title: '',
					city: [],
					first: '',
					first_fee: '',
					additional: '',
					additional_fee: ''
				})
			},
			delTemlates(index) {
				uni.showModal({
					title: '确认删除当前模版？',
					success: res => {
						if (res.confirm) {
							this.templates.splice(index, 1)
						}
					}
				})
			},
			delArea(index1, index2, area) {
				uni.showModal({
					title: `删除 ${area} ？`,
					success: res => {
						if (res.confirm) {
							// this.templates[index1].province.splice(index2, 1)
							// this.templates[index1].citys.splice(index2, 1)
							this.templates[index1].city.splice(index2, 1)
							this.area_name[index1].splice(index2, 1)
						}
					}
				})
			},
			selArea(index) {
				this.templatesIndex = index
				uni.navigateTo({
					url: `/pages/publish/chooseArea?type=1&isShowArea=false&before=""`
				})
			},
			submit() {
				if (!this.form.name) return this.$st.show('请输入模版名称')
				if (this.form.isdelivery === '') return this.$st.show('请选择是否包邮')
				if (!this.timeindex === -1) return this.$st.show('请选择发货时间')
				if (this.form.isdelivery === '0' && !this.form.valuation) return this.$st.show('请选择计价方式')
				// console.log('-=-=-=area', this.area_name)
				// console.log('-==-=-=template', this.templates)
				addLogistics({
					...this.form,
					delivery: this.timeindex,
					quList: this.templates,
					logistics_id: this.id
				}).then(res => {
					console.log('-=-=-=res', res)
					if (this.id > 0) {
						this.$st.show('修改成功')
					} else {
						this.$st.show('添加成功')
					}
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				}).catch(err => {
					console.log('-=-=-=-=', err)
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		padding: 20rpx;

		.form {
			display: flex;
			flex-direction: column;
			gap: 20rpx;

			&-card {
				padding: 0 30rpx;
				background-color: #fff;
				border-radius: 16rpx;
			}

			&-item {
				background-color: #fff;
				border-radius: 16rpx;
				padding: 20rpx 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				&-title-box {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-weight: 400;
					font-size: 30rpx;
					color: #121212;
					line-height: 36rpx;
					width: 100%;
					border-bottom: 1px solid #EEEEEE;
					padding-bottom: 20rpx;

					.tool-icon {
						display: flex;
						align-items: center;
						gap: 20rpx;

						image {
							width: 32rpx;
							height: 36rpx;
						}
					}
				}

				&-address {
					display: flex;
					flex-direction: column;
					gap: 20rpx;
					width: 100%;
					padding-top: 31rpx;

					.address-content {
						font-weight: 400;
						font-size: 26rpx;
						color: #666666;
						line-height: 40rpx;
						min-height: 50rpx;
						bottom: 50rpx;
						padding: 30rpx 0;
					}
				}

				.address-input {
					display: flex;
					flex-wrap: wrap;
					gap: 18rpx;

					>view {
						display: flex;
						align-items: center;
						justify-content: center;
						gap: 18rpx;
						width: 48%;

						>view:nth-child(2) {
							width: 200rpx;
							height: 60rpx;
							flex: 1;
							display: flex;
							align-items: center;
							justify-content: center;
							background: #F7F7F7;
							border-radius: 30rpx;

							input {
								text-align: center;
							}
						}
					}
				}

				.sel-area {
					width: 500rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					background: #F7F7F7;
					border-radius: 10rpx;
					margin: 30rpx auto;
				}
			}
		}

		.add-btn {
			width: 260rpx;
			height: 72rpx;
			line-height: 72rpx;
			text-align: center;
			background: linear-gradient(90deg, #DD551B, #F49355);
			border-radius: 36rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #FFFFFF;
			margin: 30rpx auto;
		}

		.add-template {
			margin-top: 100rpx;
			width: 610rpx;
		}
	}
</style>